<template>
  <div>
    <Drawer width="100%" title="查看资源图表" placement="right" v-model:visible="visible" @close="onClose">
      <template #closeIcon>
        <arrow-left-outlined />
      </template>
      <Card>
        <Form
          :model="formState"
          ref="formRef"
          layout="inline"
          class="form-wrapper"
          :labelCol="{ span: 12 }"
          :wrapperCol="{ span: 4 }"
        >
          <FormItem name="period" label="统计周期">
            <Select v-model:value="formState.period" :options="periodList" placeholder="日"></Select>
          </FormItem>

          <FormItem name="period" label="统计标准">
            <Select v-model:value="formState.statistic" :options="statisticList" placeholder="最大值"></Select>
          </FormItem>
          <div class="btn-wrapper">
            <Button @click="reset">重置</Button>
            <Button type="primary" @click="search" :disabled="isDisable">查询</Button>
          </div>
        </Form>
      </Card>
      <Card>
        <Row>
          <Col :span="12">
            <div>
              <span>CPU</span>
              <div id="cpu" :style="{ overflow: 'scroll' }">
                <ChartCard
                  v-for="chart in chartList"
                  :metricName="'cpu' + chart.metricName"
                  :cpuUnit="chart.cpuUnit"
                  :time="chart.timeList"
                  :value="chart.cpuList"
                  :activeKey="activeKey0"
                  :tenantName="chart.tenantName"
                  :componentName="chart.componentName"
                  :key="'cpu' + chart.metricName"
                >
                </ChartCard>
              </div>
            </div>
          </Col>
          <Col :span="12">
            <div>
              <span>存储</span>
              <div id="store" :style="{ overflow: 'scroll' }">
                <ChartCard
                  v-for="chart in chartList"
                  :metricName="'mem' + chart.metricName"
                  :memUnit="chart.menUnit"
                  :time="chart.timeList"
                  :value="chart.memList"
                  :tenantName="chart.tenantName"
                  :componentName="chart.componentName"
                  :activeKey="activeKey1"
                  :key="'mem' + chart.metricName"
                >
                </ChartCard>
              </div>
            </div>
          </Col>
        </Row>
      </Card>
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
import { Drawer, Card, Form, FormItem, Select, Button, Col, Row } from 'ant-design-vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import ChartCard from '/@/views/measurement-center/source-statistic/component/chartCard.vue';
import { computed, reactive, ref, watch } from 'vue';
import { getDetailList } from '/@/api/measurement-center/source-statistic/sourceStatistic';
import { detailItems } from '/@/api/measurement-center/source-statistic/model/sourceStatisticModel';

let chartList = ref<detailItems[]>([]);
const props = defineProps({
  chartList: Array,
  detailParams: Object,
});
let searchParams = reactive({
  ...props.detailParams,
});

const visible = ref<boolean>(false);
const openDetail = () => {
  visible.value = true;
};
const closeDetail = () => {
  visible.value = false;
};

watch(
  () => props.chartList,
  (val) => {
    chartList.value = val as detailItems[];
  },
  { immediate: true }
);
const formState = ref({
  period: undefined,
  statistic: undefined,
});
let isDisable = computed(() => {
  return !(formState.value.period && formState.value.statistic);
});
const activeKey0 = ref('0');
const activeKey1 = ref('1');

const periodList = ref([
  {
    label: '小时',
    value: 'hour',
  },
  {
    label: '日',
    value: 'day',
  },
  {
    label: '周',
    value: 'week',
  },
  {
    label: '月',
    value: 'month',
  },
]);
const statisticList = ref([
  {
    label: '最大值',
    value: 'max',
  },
  {
    label: '最小值',
    value: 'min',
  },
  {
    label: '平均值',
    value: 'avg',
  },
]);

const search = async () => {
  if (formState.value.period && formState.value.statistic) {
    searchParams.period = formState.value.period;
    searchParams.statistic = formState.value.statistic;
    searchParams.cceResourceIdList = props.detailParams.cceResourceIdList;
    searchParams.startDate = props.detailParams.startDate;
    searchParams.endDate = props.detailParams.endDate;
  }

  chartList.value = await getDetailList(searchParams);
  for (let i = 0; i < chartList.value.length; i++) {
    chartList.value[i].metricName = props.detailParams.cceResourceIdList[i];
  }
};

const reset = async () => {
  formState.value.period = undefined;
  formState.value.statistic = undefined;

  searchParams.period = 'day';
  searchParams.statistic = 'max';
};
const emit = defineEmits(['close']);
const onClose = () => {
  reset();
  emit('close');
};
defineExpose({ visible, openDetail, closeDetail });
</script>
<style lang="less">
.form-wrapper {
  padding: 20px 0;

  .ant-form-item {
    .ant-form-item-control-input {
      width: 100px;
    }

    .ant-calendar-picker-input {
      width: 250px;
    }
  }
}

.btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  padding: 0px 20px;
}
</style>
